<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding:0;}
        #parent{border: 10px black solid;overflow: hidden;}
        #box1{float: left;;width: 100px;background: red;margin-bottom: -2000px;padding-bottom: 2000px;}
        #box2{float: right;width: 100px;background: violet;margin-bottom: -2000px;padding-bottom: 2000px;}
    
    
        .container .center{height: 200px;background: yellow;float: left;width: 100%;}
        .container .center p{background: yellow;height: 100%;margin: 0 150px 0 100px;}
        .container .left{float: left;width: 100px; height: 200px;background: blue;margin-left: -100%;}
        .container .right{float: left;width: 150px; height: 200px;background: green;margin-left: -150px;}


        .clear::after{content: "";display: block;clear: both;}
        .containe{background: yellow;margin: 0 150px 0 100px;}
        .containe .center{height: 200px;float: left;width: 100%;}
        .containe .left{float: left;width: 100px; height: 200px;background: blue;margin-left: -100%;
            position: relative;left: -100px;}
        .containe .right{float: left;width: 150px; height: 200px;background: green;margin-left: -150px;
            position: relative;right: -150px;}
    </style>
</head>
<body>
    <!--
        等高布局 利用margin-bottom负值和padding-bottom配合实现
    -->
    <div id="parent">
        <div id="box1"><p>222</p></div>
        <div id="box2"></div>
    </div>
    <!--
        三列布局，左右固定，中间自适应 bfc方法/定位/浮动(双飞翼布局\圣杯布局)/flex弹性
    -->
    <!--
        双飞翼布局 margin负值
    -->
    <div class="container">
        <div class="center"><p>内容</p></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <!--
        圣杯布局
    -->
    <hr>
    <div class="containe clear">
        <div class="center"><p>内容</p></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>